<!--页面组件-->
<template>
  <div>
    <CRow>
      <!-- <CCol col="4" id="main1" class="ccolstyle"></CCol> -->
      <CCol id="main1"></CCol>
      <CCol id="main2"></CCol>
      <CCol id="main3"></CCol>
      <!-- <CCol col="1" class="ccolstyle"></CCol> -->
    </CRow>
  </div>
</template>


<!--js代码-->
<script>
var spirit = 'image://';

var maxData = 2000;
import axios from "axios";
export default {
name: 'Dashboard',
props: { },
data() {
return { 
    spirit:"@/assets/icons/delete.svg",
    maxData:2000,
    option :{
    tooltip: {
    },
    xAxis: {
        show: false,
        max: maxData,
        splitLine: {show: false},
        offset: 10,
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            margin: 10
        }
    },
    yAxis: {
        data: ['2013', '2014', '2015', '2016'],
        inverse: true,
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 10,
            color: '#999',
            fontSize: 16
        }
    },
    grid: {
        top: 'center',
        height: 200,
        left: 70,
        right: 100
    },
    series: [{
        // current data
        type: 'pictorialBar',
        symbol: spirit,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [891, 1220, 660, 1670],
        markLine: {
            symbol: 'none',
            label: {
                formatter: 'max: {c}',
                position: 'start'
            },
            lineStyle: {
                color: 'green',
                type: 'dotted',
                opacity: 0.2,
                width: 2
            },
            // data: [{
            //     type: 'max'
            // }]
        },
        z: 10
    }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            normal: {
                opacity: 0.2
            }
        },
        label: {
            show: true,
            formatter: function (params) {
                return (params.value / maxData * 100).toFixed(1) + ' %';
            },
            position: 'right',
            offset: [10, 0],
            color: 'green',
            fontSize: 18
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: spirit,
        symbolSize: 30,
        symbolBoundingData: maxData,
        data: [891, 1220, 660, 1670],
        z: 5
    }]
},

}
},
created() { 

},
mounted() {
    let time = this.$moment(new Date()).valueOf() / 1000;
    this.getMemory(time)
},
methods: { 
 getCpu(time) {
      let self = this;
   let path = this.$api.homeLoginOthers.getCpu;
      // var myChart = this.$echarts.init(document.getElementById("main1"));
      axios
        .get(path, {
          params: {
            query:
              '100 - (avg(irate(node_cpu_seconds_total{instance=~"master",mode="idle"}[5m])) * 100)',
            step: 7200,
            start: time,
            end: time
          }
        })
        .then(function(res) {
          if (res.status == 200 && res.data.status == "success") {
            let data = res.data.data.result;
            let value = data[data.length - 1].values[0][1];
            self.getCpudata = parseFloat(value).toFixed(2);
            self.optionsCpu.series[0].data[0].value = Number(
              Number(value).toFixed(2)
            );
          }
          // myChart.setOption(self.optionsCpu);
        });
    },
    getDiskUse(time) {
      let self = this;
      let path = this.$api.homeLoginOthers.getCpu;
      var myChart = this.$echarts.init(document.getElementById("main3"));
      axios
        .get(path, {
          params: {
            query:
              '1-(node_filesystem_free_bytes{instance=~"master",fstype=~"ext4|xfs"} / node_filesystem_size_bytes{instance=~"master",fstype=~"ext4|xfs"})',
            step: 7200,
            start: time,
            end: time
          }
        })
        .then(function(res) {
        //   if (res.status == 200 && res.data.status == "success") {
        //     let data = res.data.data.result;
        //     let value = data[data.length - 1].values[0][1];
        //     // ;
        //     self.getDiskUsedata = parseFloat(value * 100).toFixed(2);
        //     self.optionPan.series[0].data[0].value = Number(
        //       Number(value * 100).toFixed(2)
        //     );
        //   }
        //   myChart.setOption(self.option1);
        });
    },
    getMemory(time) {
      let self = this;
      let path = this.$api.homeLoginOthers.getCpu;
      var myChart = this.$echarts.init(document.getElementById("main2"));
      axios
        .get(path, {
          params: {
            query:
              '(1 - (node_memory_MemAvailable_bytes{instance=~"master"} / (node_memory_MemTotal_bytes{instance=~"master"})))* 100',
            step: 7200,
            start: time,
            end: time
          }
        })
        .then(function(res) {
          if (res.status == 200 && res.data.status == "success") {
            // let data = res.data.data.result;
            // // ;
            // let value = data[data.length - 1].values[0][1];
            // self.getMemorydata = parseFloat(value).toFixed(2);
            // self.optionsMe.series[0].data[0].value = Number(
            //   Number(value).toFixed(2)
            // );
          }
          myChart.setOption(self.option);
        });
    },
},
}
</script>


<!--css样式-->
<style lang='' scoped>
</style>
